import { useLocation } from 'react-router-dom';

import MessageBox from '@/components/MessageBox';
import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFactorForm';
import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddressForm';
import UpdatePasswordForm from '@/components/dashboard/forms/UpdatePasswordForm';
import ContentBox from '@/components/elements/ContentBox';
import PageContentBlock from '@/components/elements/PageContentBlock';

import Code from '../elements/Code';

export default () => {
    const { state } = useLocation();

    return (
        <PageContentBlock title={'您的设置'}>
            <h1 className='text-[52px] font-extrabold leading-[98%] tracking-[-0.14rem] mb-8'>您的设置</h1>
            {state?.twoFactorRedirect && (
                <MessageBox title={'2-Factor Required'} type={'error'}>
                    您的帐户必须启用双重身份验证才能继续。
                </MessageBox>
            )}

            <div className='flex flex-col w-full h-full gap-4'>
                <h2 className='mt-8 font-extrabold text-2xl'>账户详情</h2>
                <ContentBox title={'邮箱地址'} showFlashes={'account:email'}>
                    <UpdateEmailAddressForm />
                </ContentBox>
                <h2 className='mt-8 font-extrabold text-2xl'>密码与认证</h2>
                <ContentBox title={'账户密码'} showFlashes={'account:password'}>
                    <UpdatePasswordForm />
                </ContentBox>
                <ContentBox title={'多因素认证'}>
                    <ConfigureTwoFactorForm />
                </ContentBox>
                <h2 className='mt-8 font-extrabold text-2xl'>App</h2>
                <ContentBox title={'面板版本'}>
                    <p className='text-sm mb-4'>如果您遇到意外问题,这对于提供 Pyro 工作人员非常有用。</p>
                    <div className='flex flex-col gap-4'>
                        <Code>
                            版本: {import.meta.env.VITE_PYRODACTYL_VERSION} - {import.meta.env.VITE_BRANCH_NAME}
                        </Code>
                        <Code>提交: {import.meta.env.VITE_COMMIT_HASH.slice(0, 7)}</Code>
                    </div>
                </ContentBox>
            </div>
        </PageContentBlock>
    );
};
